<template>
  <div class="app-container">
    <div class="table-tool">
      <span style="font-weight: bold;font-size: 14px;margin: 0px 5px">模板</span>
      <el-select v-model="tid" placeholder="请选择" size="mini">
        <el-option
          v-for="item in templateList"
          :key="item.id"
          :label="item.templateName"
          :value="item.id"
        />
      </el-select>
      <el-button size="mini" style="margin-left: 14px" @click="initData">筛选</el-button>
    </div>
    <el-table
      :data="list"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="title"
        label="通知标题"
        width="180"
      />
      <el-table-column
        prop="content"
        label="内容"
      />
      <el-table-column
        width="100"
        label="状态"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ getStatus(scope.row.status) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getMessageList } from '@/api/message'
import { getTemplateList } from '@/api/template'
export default {
  data() {
    return {
      tid: 1,
      list: '',
      templateSelected: '',
      templateList: []
    }
  },
  mounted() {
    this.initData()
    this.getTemplate()
  },
  methods: {
    getTemplate() {
      getTemplateList().then(res => {
        this.templateList = res.data
      })
    },
    initData() {
      const param = {
        size: 10,
        current: 1,
        templateId: this.tid
      }
      getMessageList(param).then(res => {
        this.list = res.data.records
      })
    },
    getStatus() {
      return status === 1 ? '启用' : '未启用'
    }
  }
}
</script>
